<!--
 * @Author: your name
 * @Date: 2020-12-16 19:45:59
 * @LastEditTime: 2020-12-16 21:23:55
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: /out/vue3-admin-template/src/views/table/index.vue
-->
<template>
    <div class="app-container">
        <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
        >
            <el-table-column align="center" label="ID" width="95">
                <template #default="scope">
                    {{ scope.index_ }}
                </template>
            </el-table-column>
            <el-table-column label="Title">
                <template #default="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column label="Author" width="110" align="center">
                <template #default="scope">
                    <span>{{ scope.row.author }}</span>
                </template>
            </el-table-column>
            <el-table-column label="Pageviews" width="110" align="center">
                <template #default="scope">
                    {{ scope.row.pageviews }}
                </template>
            </el-table-column>
            <el-table-column
                class-name="status-col"
                label="Status"
                width="110"
                align="center"
            >
                <template #default="scope">
                    <el-tag :type="statusFilter(scope.row.status)">{{
                        scope.row.status
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="created_at"
                label="Display_time"
                width="200"
            >
                <template #default="scope">
                    <i class="el-icon-time" />
                    <span>{{ scope.row.display_time }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { getList } from '@/api/table';

export default defineComponent({
    data() {
        return {
            list: null,
            listLoading: true
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            this.listLoading = true;
            getList().then(response => {
                this.list = response.data.items;
                this.listLoading = false;
            });
        },
        statusFilter(status) {
            const statusMap = {
                published: 'success',
                draft: 'gray',
                deleted: 'danger'
            };
            return statusMap[status];
        }
    }
});
</script>
